<template>
<div class="container">
    <div class="signDesk">
    <img src="/static/images/daka/dao.jpg"  class='bg'/>
    <div class='carD'>
        <div class='weui-cell title'>
            <div class='weui-cell__bd'>签到分享赚取好礼</div>
        </div>
        <div class='column'>
            <div class='columnItem' v-for="(item,index) in 7" :key="index">
                {{item+1}}天
            </div>
        </div>
        <div class='column'>
                <div class='columnItem' v-for="(item,idx) in 7" :key="idx" v-if="isshow">
                     <img src='/static/images/daka/gold.png' class='gold' v-if="item+1<=num"/>
                     <image src='/static/images/daka/gold1.png' class='gold' v-else />
                </div>
        </div>
    </div>

        <div class='btn' v-if="sign_today==0">
            <div @click='toQian'>
                签到领取好礼
            </div>
        </div>
        <div class='btn' @click='toQian' v-else>
            已签到
        </div>
        <div class="mask" v-if="show">
            <img class='close' src='/static/images/close1.png' @click="close"/>
            <img class='baobg' :src="img+'/Rbao.png'" />
            <div class='bao'>
                <div class='says'>
                    <div>{{saying.content}}</div>
                    <div style='text:right;'>{{saying.author}}</div>
                </div>
                <div class='ewm'><img :src='ewcode'/></div>
                    <div class='from'>
                        <span>来自：</span> <img :src='userinfo.avatar' class='tx'/> {{userinfo.nickname}}
                    </div>
                </div>
                <div class="savebtn" @click="saveimg">保存图片</div>
            </div>
        </div>
        <div class="ads" v-if="ads">
            <div class="weui-cell">特色活动</div>
            <a :href="ads.link">
                <img :src="ads.content" alt="" mode="aspectFill"/>
            </a>
        </div>
    </div>
</template>

<script>
import {
    sign
} from "@/api/operate"
import {
    tosign
} from "@/api/operate"
export default {
    components: {},

    data() {
        return {
            num: 0,
            wuNum:7,
            signDay: "",
            show: false,
            sign_today: 0,
            saying: "",
            ewcode: "",
            img: this.$URL.imgurl,
            userinfo: "",
            ads:"",
            isshow:false
        };
    },
    methods: {
        signINfo() {
            console.log(1)
            sign().then(res => {
                if(res.code==200){
                    console.log(res)
                    this.ads=res.data.ads
                    this.sign_today = res.data.sign_today;
                    if(res.data.num) {
                        this.num = parseInt(res.data.num);   
                        this.wuNum=this.wuNum-this.num
                    }else{
                        this.num=0;
                    }
                    
                    this.isshow=true
                }
                
            })
        },
        saveimg() {
            wx.getImageInfo({
                src: this.ewcode,
                success:(ret) => {
                    var path = ret.path;
                    wx.saveImageToPhotosAlbum({
                        filePath: path,
                        success:(result) =>  {
                          wx.showToast({
                            title: '保存成功',
                            success:(result) => {
                                
                            },
                            fail: () => {},
                            complete: () => {}
                          });
                            
                            
                        }
                    })
                    this.show = false;
                }
            })
        },
        toQian() {
            tosign().then(res => {
                if(res.code==200){
                    
                    this.saying = res.data.saying;
                    this.ewcode = res.data.code;
                    this.show = true;
                    this.signINfo()
                }else{
                    wx.showToast({
                        title: res.msg,
                        icon: 'none',
                    });
                      
                }
                    
            })
        },
        close() {
            this.show = false;
            
        },

    },

    created() {},
    onLoad(options) {
        Object.assign(this.$data, this.$options.data())
        this.signINfo();
        this.userinfo = wx.getStorageSync("user_info");
       
    }
};
</script>

<style lang="scss" >
.signDesk {
    
    .bg {
        width: 375px;
        height: 209px;
        display: block;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }

    .carD {
        width: 375px;
        height: 209px;

        .title {
            font-size: 16px;
            padding: 25px;
            font-weight: bold;
            color: rgba(255, 235, 201, 1);
        }

        .column {
            display: flex;
            position: relative;
            padding: 0 15px;
            padding-bottom: 25px;

            .columnItem {
                -webkit-box-flex: 1;
                -webkit-flex: 1;
                flex: 1;
                text-align: center;
                font-size: 14px;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);

                .gold {
                    width: 20px;
                    height: 19px;
                }
            }
        }
    }

    .btn {
        width: 285px;
        height: 45px;
        background: linear-gradient(0deg,
            rgba(232, 179, 90, 1) 0%,
            rgba(248, 206, 136, 1) 100%);
        border-radius: 5px;
        text-align: center;
        line-height: 45px;
        margin: 0 auto;
        margin-top: 20px;
        font-size: 15px;
        font-weight: bold;
        color: rgba(130, 74, 49, 1);
        position: relative;
    }

    .mask {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5)
    }

    .baobg {
        width: 290px;
        height: 430px;
        position: fixed;
        right: 0;
        left: 0;
        margin: auto;
        top: 55px;
    }

    .bao {
        width: 290px;
        height: 430px;
        position: fixed;
        right: 0;
        left: 0;
        margin: auto;
        top: 55px;
    }

    .bao .ewm {
        width: 139px;
        height: 139px;
        background: linear-gradient(0deg, rgba(245, 193, 120, 1) 0%, rgba(249, 212, 142, 1) 100%);
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        top: 215px;
    }

    .close {
        width: 50rpx;
        height: 107rpx;
        display: block;
        top: 26rpx;
        right: 98rpx;
        position: fixed;
    }

    .bao .ewm image {
        width: 139px;
        height: 139px;
        display: block;
    }

    .bao .from {
        width: 290px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        font-size: 15px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .bao .from text {
        font-size: 15px;
        font-weight: normal;
        color: rgba(250, 223, 154, 1);
    }

    .tx {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        vertical-align: middle;
    }

    .says {
        width: 215px;
        height: 59px;
        font-size: 12px;
        color: rgba(250, 223, 154, 1);
        line-height: 24px;
        position: absolute;
        top: 140px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .savebtn {
        width: 230px;
        height: 45px;
        background: linear-gradient(0deg, rgba(245, 193, 120, 1) 0%, rgba(249, 212, 142, 1) 100%);
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.35);
        border-radius: 5px;
        font-size: 15px;
        font-weight: 500;
        color: rgba(130, 74, 49, 1);
        line-height: 45px;
        text-align: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 509px;
        margin: auto;
    }
}
.ads{
    border-top: 10px solid #F4F5F5;
    margin-top: 62px;
    font-size:16px;
    font-weight:500;
     img{
        width:346px;
        height:140px;
        border-radius:5px;
        display: block;
        margin: 0 auto;
     }
}
</style>
